<script setup lang="ts">
import { getDeviceInfoById, getDeviceLogList } from '@/api/device';
import { DeviceInfo, DeviceLog } from '@/api/device/type';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import Header from '@/components/Header.vue';
import * as echarts from 'echarts';
import Temperature from '@/components/icons/Temperature.vue';
import Humidity from '@/components/icons/Humidity.vue';
import LightMagnitude from '@/components/icons/LightMagnitude.vue';
import H2S from '@/components/icons/H2S.vue';
const id = ref('');
const deviceInfo = ref({} as DeviceInfo);
const logList = ref([] as DeviceLog[]);
const temperatureOption = ref({} as echarts.EChartsOption);
const humidityOption = ref({} as echarts.EChartsOption);
const lightMagnitudeOption = ref({} as echarts.EChartsOption);
const h2sOption = ref({} as echarts.EChartsOption);

onMounted(() => {
    const route = useRoute();
    id.value = route.query.id as string;
    init();
})

const getOption = () => {
    const option = {
        xAxis: {
            type: 'category',
            name: '时间',
            data: logList.value.map(item => item.uploadTime)
        },
    } as echarts.EChartsOption;
    return option;
}

const init = async () => {
    deviceInfo.value = (await getDeviceInfoById(id.value)).data;
    logList.value = (await getDeviceLogList(id.value)).data;
    var temperature = document.getElementById('temperature')!;
    var humidity = document.getElementById('humidity')!;
    var lightMagnitude = document.getElementById('lightMagnitude')!;
    var h2s = document.getElementById('h2s')!;
    var temperatureChart = echarts.init(temperature);
    var humidityChart = echarts.init(humidity);
    var lightMagnitudeChart = echarts.init(lightMagnitude);
    var h2sChart = echarts.init(h2s);
    temperatureOption.value = getOption();
    humidityOption.value = getOption();
    lightMagnitudeOption.value = getOption();
    h2sOption.value = getOption();
    temperatureOption.value.yAxis = {
        type: 'value',
        name: '温度'
    },
    temperatureOption.value.series = [{
        data: logList.value.map(item => item.temperature),
        type: 'line',
        smooth: true
    }]
    humidityOption.value.series = [{
        data: logList.value.map(item => item.humidity),
        type: 'line',
        smooth: true
    }]
    humidityOption.value.yAxis = {
        type: 'value',
        name: '湿度'
    },
    lightMagnitudeOption.value.series = [{
        data: logList.value.map(item => item.lightMagnitude),
        type: 'line',
        smooth: true
    }]
    lightMagnitudeOption.value.yAxis = {
        type: 'value',
        name: '光照强度'
    };
    h2sOption.value.series = [{
        data: logList.value.map(item => item.lightMagnitude),
        type: 'line',
        smooth: true
    }]
    h2sOption.value.yAxis = {
        type: 'value',
        name: 'H2S浓度'
    };
    temperatureChart.setOption(temperatureOption.value);
    humidityChart.setOption(humidityOption.value);
    lightMagnitudeChart.setOption(lightMagnitudeOption.value);
    h2sChart.setOption(h2sOption.value);
}

</script>

<template>
    <div class="container">
        <Header name="设备详情"></Header>
        <div class="content">
            <div class="info">
                <div class="item">
                    <div class="head">
                        <Temperature></Temperature>
                        <p style="margin-left: 3%;">温度</p>
                    </div>
                    <div>
                        <p>{{ deviceInfo.temperature }} °C</p>
                    </div>
                </div>
                <div class="item">
                    <div class="head">
                        <Humidity></Humidity>
                        <p style="margin-left: 3%;">湿度</p>
                    </div>
                    <div>
                        <p>{{ deviceInfo.humidity }} RH</p>
                    </div>
                </div>
                <div class="item">
                    <div class="head">
                        <LightMagnitude></LightMagnitude>
                        <p style="margin-left: 3%;">光照强度</p>
                    </div>
                    <div>
                        <p>{{ deviceInfo.lightMagnitude }} LX</p>
                    </div>
                </div>
                <div class="item">
                    <div class="head">
                        <H2S></H2S>
                        <p style="margin-left: 3%;">H2S浓度</p>
                    </div>
                    <div>
                        <p>{{ deviceInfo.h2s }} PPP</p>
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="content">
                    <div id="temperature" class="chart"></div>
                    <div id="humidity" class="chart"></div>
                    <div id="lightMagnitude" class="chart"></div>
                    <div id="h2s" class="chart"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    .content {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow-y: scroll;
        scrollbar-width: none;
        -ms-overflow-style: none;
        .info {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            .item {
                width: 38%;
                background-color: white;
                border-radius: 15px;
                padding: 3%;
                margin: 3%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .head {
                    display: flex;
                    align-items: center;
                }
                .text {

                }
            }
        }
        .body {
            background-color: white;
            width: 94%;
            margin: 3%;
            border-radius: 15px;

            .content {
                display: flex;
                flex-direction: column;
                padding: 3%;
                width: 94%;
                .chart {
                    width: 100%;
                    height: 300px;
                }
            }
        }
    }
}
</style>